<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>防抖</title>
    </head>
    <body>
        <!-- 通过setTimeout的方式第一次会执行和最后一次执行 -->
        <input type="button" id="btn" value="按钮" />
        <script>
            var btn = document.getElementById('btn');
            // 点击后触发trigger()函数，第一个参数为真实要执行的函数，第二个参数为定时器延迟时间
            btn.addEventListener('click', trigger(real, 1000));
            function trigger(fn, delay) {
                // 设置time为定时器，初始为 null
                var time = null;
                return function () {
                    //定义一个firstClick，判断是否第一次执行，初始值为true
                    var firstClick = !time;
                    //第一次会立即执行
                    if (firstClick) {
                        fn(...arguments);
                    }
                    // 如果定时器存在清空定时器
                    if (time) {
                        clearTimeout(time);
                    }
                    // 设置定时器，此时firstClick会变为false，规定时间后time才会为null
                    time = setTimeout(() => {
                        time = null;
                        // 如果firstClick为true，执行
                        if (!firstClick) {
                            fn(...arguments);
                        }
                    }, delay);
                };
            }
            //真实要执行函数
            function real(e) {
                console.log('北极光之夜。');
                console.log(e);
            }
        </script>
    </body>
</html>
